<script setup lang="ts">
import Content from '@/components/Content/index.vue'
import UploadTemplateProgress from '@/components/UploadTemplateProgress/index.vue'
import TranscodingTemplate from '@/components/TranscodingTemplate/index.vue'
import SelectMusic from '@/components/SelectMusic/index.vue'
import PushItem from './components/PushItem/index.vue'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import APIUploadMaterial from '@/api/upload-material'
import { CloseBold } from '@element-plus/icons-vue'

const objectFile = ref<any>({})

const fileRef = shallowRef<HTMLInputElement>()
const filePackageRef = shallowRef<HTMLInputElement>()

function onChangeFile(e: Event) {
    const dom = e.target as HTMLInputElement
    const files = dom.files
    if (!files) return
    if (!files[0].type.includes('video')) {
        dom.value = ''
        ElMessage.error('只能上传视频文件类型')
        return
    }
    objectFile.value.file = files[0]
    dom.value = ''
}

function handleUploadPackage() {
    if (objectFile.value['project_file']) {
        ElMessage.error('已上传该文件，请删除对应的文件后再重新操作')
        return
    }
    filePackageRef.value?.click()
}


function onChangePackageFile(e: Event) {
    const dom = e.target as HTMLInputElement
    const files = dom.files
    if (!files) return
    if (!['application/zip', 'application/x-rar-compressed', 'application/x-tar', 'application/gzip', 'application/x-7z-compressed', 'application/x-compressed', 'application/x-zip-compressed'].includes(files[0].type)) {
        dom.value = ''
        ElMessage.error('只能上传压缩包')
        return
    }
    objectFile.value.project_file = files[0]
    dom.value = ''
}

const formFile = ref<any>({})

const dialogVisible = shallowRef<boolean>(false)

function onRemove(str: string) {
    objectFile.value[str] = undefined
}

function handleUpload() {
    if (objectFile.value['file']) {
        ElMessage.error('已上传该文件，请删除对应的文件后再重新操作')
        return
    }
    fileRef.value?.click()
}

const isShowUpload = computed(() => {
    return objectFile.value['file'] && objectFile.value['project_file']
})

const isShowEmpty = computed(() => {
    return objectFile.value['file'] || objectFile.value['project_file']
})
const disabledUploadFiles = shallowRef<boolean>(false)

const projectFileRef = shallowRef<InstanceType<typeof UploadTemplateProgress>>()

const progressFileRef = shallowRef<InstanceType<typeof UploadTemplateProgress>>()

function handleUploadFiles() {
    disabledUploadFiles.value = true
    projectFileRef.value?.handleNormalUpload()
}

function onNormalUpload(file: any) {
    formFile.value.project_file = file
    progressFileRef.value?.handleUpload()
}

const transcodingTemplate = ref<any[]>([])
function onSuccess(code: string) {
    ElMessage.success('已全部上传完毕')
    formFile.value = {}
    objectFile.value = {}
    transcodingTemplate.value.push(code)
    disabledUploadFiles.value = false
}

const loading = shallowRef<boolean>(false)
const isPushTvideo = ref<any[]>()
function getIsPushTvideo() {
    loading.value = true
    APIUploadMaterial.getIsPushTvideo().then(({ data }) => {
        isPushTvideo.value = data
    }).finally(() => {
        loading.value = false
    })
} getIsPushTvideo()

function onTranscodingSuccess(index: number) {
    transcodingTemplate.value.splice(index, 1)
    getIsPushTvideo()
}

defineExpose({
    disabledUploadFiles
})

</script>

<template>
    <div class="template">
        <div class="btns">
            <div class="btns-left">
                <button class="btns-left-btn" type="button" @click="handleUpload">
                    <p>+</p>
                    <p>模板视频</p>
                </button>
                <button class="btns-left-btn" type="button" @click="handleUploadPackage">
                    <p>+</p>
                    <p>工程文件压缩包</p>
                </button>
                <button class="btns-left-btn btns-left-btn-music" @click="dialogVisible = true">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                        viewBox="0 0 32 32" width="20" height="20"
                        style="border-color: rgba(0,0,0,0);border-width: bpx;border-style: undefined" filter="none">
                        <g>
                            <path
                                d="M16 5.333c-5.891 0-10.667 4.776-10.667 10.667v0h4c1.473 0 2.667 1.194 2.667 2.667v0 6.667c0 1.473-1.194 2.667-2.667 2.667v0h-4c-1.473 0-2.667-1.194-2.667-2.667v0-9.333c0-7.364 5.969-13.333 13.333-13.333s13.333 5.969 13.333 13.333v9.333c0 1.473-1.194 2.667-2.667 2.667v0h-4c-1.473 0-2.667-1.194-2.667-2.667v0-6.667c0-1.473 1.194-2.667 2.667-2.667v0h4c0-5.891-4.776-10.667-10.667-10.667v0zM5.333 18.667v6.667h4v-6.667h-4zM22.667 18.667v6.667h4v-6.667h-4z"
                                fill="rgba(248.88,19.89,19.89,1)">
                            </path>
                        </g>
                    </svg>
                    选择背景音乐
                </button>
                <div class="ative" v-if="formFile.bg_music">
                    已选择背景音乐
                    <div class="delete" @click="formFile.bg_music = undefined" >
                        <el-icon color="#ffffff" size="11px" >
                            <CloseBold />
                        </el-icon>
                    </div>
                </div>
                <input type="file" @change="onChangeFile" style="display: none;" ref="fileRef" accept="video/*" />
                <input type="file" @change="onChangePackageFile" accept=".zip,.rar,.tar,.gz,.7z" style="display: none;"
                    ref="filePackageRef" />
            </div>
            <el-button type="danger" class="btns-right" v-if="isShowUpload" @click="handleUploadFiles"
                :disabled="disabledUploadFiles">上传</el-button>
        </div>
        <Content class="center">
            <div class="empty" v-if="!isShowEmpty">在“模板视频、工程文件压缩包”处添加上传文件</div>
            <TransitionGroup name="list">
                <UploadTemplateProgress ref="progressFileRef" :formFile="formFile" v-if="objectFile.file"
                    :file="objectFile.file" @on-remove="onRemove('file')" @on-success="onSuccess" />
                <UploadTemplateProgress ref="projectFileRef" v-if="objectFile.project_file"
                    :file="objectFile.project_file" @on-remove="onRemove('project_file')"
                    @on-normal-upload="onNormalUpload" />
            </TransitionGroup>
        </Content>
        <div class="push-list" v-loading="loading">
            <TranscodingTemplate v-for="(item, index) in transcodingTemplate" :key="index" :code="item"
                @on-success="onTranscodingSuccess(index)" />
            <PushItem v-for="item in isPushTvideo" :key="item.goods_id" :item="item" @get-is-pus="getIsPushTvideo"
                @close="$emit('close')" />
        </div>
        <SelectMusic v-model="dialogVisible" v-model:getBgMusic="formFile.bg_music" />
    </div>
</template>

<style lang="scss" scoped>
.template {
    .quxiao {
        cursor: pointer;

        &:hover {
            text-decoration: underline;
        }
    }

    .push-list {
        width: 900px;
        display: grid;
        grid-template-columns: repeat(4, 200px);
        margin-top: 54px;
        justify-content: space-between;
        gap: 30px 0;

        >div {
            box-sizing: border-box;
            height: 112px;
            border-radius: 5px;
            overflow: hidden;
        }
    }

    .center {
        margin-top: 20px;
        min-height: 172px;
        position: relative;
        padding: 8px 12px;
        box-sizing: border-box;

        .empty {
            font-size: 13px;
            color: #9A9A9A;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateY(-50%) translateX(-50%);
            font-family: 'SOURCEHANSANSCN-EXTRALIGHT';
        }
    }

    .btns {
        display: flex;
        justify-content: space-between;

        .btns-right {
            width: 170px;
            height: 38px;
            line-height: 20px;
            border-radius: 5px;
            font-size: 14px;
            letter-spacing: 5px;
            background-color: #F91B1B;
        }

        .btns-left {
            display: flex;
            align-items: center;
            gap: 0 34px;

            .ative {
                position: relative;
                left: -15px;

                .delete {
                    position: absolute;
                    right: -10px;
                    top: -10px;
                    width: 15px;
                    height: 15px;
                    border-radius: 50%;
                    background-color: #F91B1B;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;
                }
            }

            .btns-left-btn {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 170px;
                height: 38px;
                border: none;
                border-radius: 5px;
                font-size: 14px;
                cursor: pointer;
                background-color: rgba(55, 133, 242, 1);
                color: rgba(255, 255, 255, 1);
                gap: 0 10px;
            }


            .btns-left-btn-music {
                background-color: #ffffff;
                color: #ff0000;
                border: 1px dashed rgba(206, 206, 206, 1);
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 0 10px;
            }
        }
    }
}

.list-enter-active,
.list-leave-active {
    transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
    opacity: 0;
    transform: translateX(30px);
}
</style>
